<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<div id="app">


    <!--
        1. 切换
    -->
    <div v-if="isSuccess">
        成功！
    </div>
    <div v-else>
        失败！
    </div>

    <!--
        2.显示隐藏
    -->
    <div v-if="isErr">
        用户名或者失败
    </div>

    <div v-show="isErr">
        用户名或者失败(v-show版本)
    </div>

    <!--
         3.  多内容同时显示
             1. 不添加额外的层次
             2. 不在每个节点上单独设置

         为什么v-show不支持 多内容的同时显示隐藏
    -->

    <template v-if="isSuccess">
        <div>box1</div>
        <div>box2</div>
    </template>


</div>
</body>
<script src="../../../lib/vue.global.js"></script>
<script>

    /**
     *    v-if 和 v-show的比较
     *       1. v-if  从dom结构中直接删除 对应的dom
     *       2. v-show 仅仅是 设置 display：none ，缓存起来
     *
     *     嵌套！！
     *        不要出现多余两层的嵌套
     *
     *
     *    vue     -  侵入式的编码形式
     *    jquery  - 非侵入式的编码形式
     * */


    const app = {
        data() {
            return {
                isSuccess: true,
                isErr: false
            }
        }
    }

    Vue.createApp(app).mount('#app');

</script>

</html>